<template>
	<div>
		<van-field v-model="remark" rows="22"  autosize type="textarea" placeholder="写下你的想法" />
		<div style="right: 2%;position: absolute;margin-top: 1rem;">
			<van-icon name="delete-o" size="25" color="#B9BEC1" @click="ondelete()" />
		</div>
		<div style="margin-top: 1rem;margin-left: 1rem;">
			<van-uploader name="pic" v-model="picList" :max-count="1" :after-read="afterRead" preview-size="100"/>
		</div>
		<div style="position: fixed;bottom: 2rem;width: 80%;margin-left: 10%;">
			<van-button round size="large"
				style="background-color: #14C5CD; color: #ffffff;width: 100%;font-weight: bold;font-size: 16px;border: 0;margin-top: 1rem;"
				@click="onRelease()">
				发表
			</van-button>
		</div>
	</div>
</template>

<script>
	import {
		getForumReviewContentByIdAPI,
		uploadPicAPI,
	} from "@/api/forum.js";
	import {
		getUserLocal,
	} from "@/utils/auth.js"
	import {
		getDetailByIdAPI,
	} from "@/api/user.js";
	export default {
		data() {
			return {
				picList: [],
				pic:'',
				remark: "",
				user: {},
				avatar: '',
				nowTime: '',
			};
		},
		mounted() {
			this.user = getUserLocal();
			getDetailByIdAPI(this.user.id).then(result => {
				this.avatar = result.data.avatar;
			}).catch(() => {});
			this.getNowTime(); //调用函数
		},

		methods: {
			getNowTime() {
				var date = new Date();
				var year = date.getFullYear() // 年
				var month = date.getMonth() + 1; // 月
				var day = date.getDate(); // 日
				// 给一位数的数据前面加 “0”
				if (month >= 1 && month <= 9) {
					month = "0" + month;
				}
				if (day >= 0 && day <= 9) {
					day = "0" + day;
				}
				this.nowTime = year + "-" + month + "-" + day;
			},
			afterRead(file, detail) {
			  file.status = 'uploading';
			  file.message = '上传中...';
			  uploadPicAPI(file, detail).then(result => {
			    file.status = '';
			    file.message = '';
			    //重新生成显示的图片url
				this.picList = [];
			    this.picList.push({
			      url: this.APIDomainName + result.url
			    })
			    //设置用户表中的字段值
			    this.pic = result.url;
			  });
			},
			onRelease() {
				let params = {
					id: this.$route.params.id,
					remark: this.remark,
					avatar: this.avatar,
					date: this.nowTime,
					pic: this.pic
				};
				getForumReviewContentByIdAPI(params).then((result) => {
					this.$toast(result.msg);
					this.$router.go(-1);
				});
			},
			ondelete(){
				this.remark='';
			}
		},
	};
</script>

<style>
	.van-field {
		font-size: 20px;
	}
</style>
